//渲染
import tools from '../../../utils/tools';
import courseItem from '../../../templates/courseItem.tpl';
import Event from './Event';



//装饰器
// @tools
export default class Render {
  constructor(oList, courseData, cartData, observer) {
    this.oList = oList;
    this.courseData = courseData;
    this.cartData = cartData;
    this.observer = observer;

    this.init();
  }

  init() {
    this.render();
    new Event(
      this.oList,
      this.courseData,
      this.cartData,
      this.observer
    );
  }

  /**
   * 渲染方法
   * 需要：模板/渲染方法函数/创建li节点方法函数
   */
  render() {
    //防止页面回流重新渲染利用文档碎片插入页面
    const oFrag = document.createDocumentFragment();

    this.courseData.forEach((item) => {
      //创建li节点
      oFrag.appendChild(tools().createElement(
        //节点
        'li',
        //文本内容
        tools().tplReplace(courseItem, {
          //解析
          id: item.id,
          title: item.title,
          price: `￥${item.price}.00`,
          coupon: item.coupon ? `￥${item.coupon}.00` : '暂无优惠券',
          //如果已在购物车就不显示，否则显示
          disabled: item.state ? 'disabled' : '',
          btnText: item.state ? '已添加' : '加入购物车'
        })
      ));
    });

    //将碎片插入页面列表容器里
    this.oList.appendChild(oFrag);
  }

}